<template>
	<view>
		<view class="title" :style="titleStyle">{{title}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			// 自定义样式，对象形式
			customStyle: {
				type: Object,
				default() {
					return {};
				}
			},
		},
		data(){
			return {
				s: 0,
				n: 0
			}
		},
		computed: {
			titleStyle() {
				return 'margin-top:' + this.s + 'px;height: ' + this.n + 'px;'
			}
		},
		created() {
			this.s = this.globalData.systemInfo.statusBarHeight + 2, //状态栏高度
				this.n = (this.globalData.menu.top - this.globalData.systemInfo.statusBarHeight) * 2 + this.globalData.menu
				.height //导航栏高度
		},
	}
</script>

<style>
	.title {
		width: 100%;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		top: 0;
		z-index: 999;
    padding: 20rpx 0;
    font-weight: 700;
	}
</style>
